$(function () {
    // 定义变量
    let content = $("#conten")
    let header = $(".header")
    let contentul = $("#conten>ul")
    let contentLis = $("#conten>ul>li")
    let index = 0  




    // 菜单项点击监听 
    $("header>.nav>li").click(function () {
        // 点击的菜单项序号
         index = $(this).index()
        moveHead(index)
        moveContent(index)


    })


    function moveHead(index) {
        // console.log("菜单点击操作:index=" + index)
        // 如果是第0项，那么切换显示的图片
        let cur = $("header>.nav>li").eq(index)
        if (index == 0) {
            cur.find("img").eq(0).slideUp().siblings("img").slideDown()
        } else {
            cur.parent().find("img").eq(1).slideUp().siblings("img").slideDown()
        }
        // 否则，切换显示的文本颜色和字体

        cur.find("a").css({ color: 'black', fontweight: 'bold' })
            // 查询超链接 修改css央视
            .parent().siblings().find("a").css({ color: 'rgb(255, 141, 26)', fontweight: 'mormal' })
        // 向上查询父节点，点击其他元素后还原颜色与字体的粗细

        let ml = cur.position().left + cur.width() / 2 - $(".arrow").width() / 2


        $(".arrow").animate({ left: ml }, 500)
    }


    function moveContent(index) {
        let h = -index * ($(window).height() - header.height())
        contentul.animate({ top: h }, 1000)
    }


    // 模拟点击第一项
    $("header>.nav>li").eq(0).trigger('click')

    // 动态调整conten与其中li的高度
    contentBind()
    function contentBind() {
        // 修改content的高度
        content.css('height', $(window).height() - header.height())
        // 修改content中li的高度
        contentLis.css('height', $(window).height() - header.height())

    }
    // 拖动浏览器自动修改高度
    $(window).resize(function () {
        contentBind()
    })

    $(window).mousewheel(function(event,dalta){
        if(dalta<0&&index<contentLis.length){
            index++
        }else if(dalta>0&&index>0){
            index--
        }
        moveHead(index)
        moveContent(index)
    })

    // 页面整体框架完成
    
    // 开始制作页面滚顶
    var mySwiper = new Swiper ('.swiper', {
        // direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项
        autoplay:true,
        
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
          clickable :true,
          
        },
        
        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        autoplay: {
            // 防止操作；轮播图后页面ting
            disableOnInteraction: false,
            // 指针进入页面停止自动切换
            pauseOnMouseEnter: true,
          }
        
        // 如果需要滚动条
        // scrollbar: {
        //   el: '.swiper-scrollbar',
        // },
        
      })      
    //    图片3d做法
      let historyText = ["半坡遗址","汉长安城","秦兵马俑","大雁塔","唐大明宫","明钟楼"]
      $("#conten>.list>.history>div>.pice>.item ").mouseover(function(){
        let index = $(this).index()
        $("#conten>.list>.history>div>.test>.contentTest").html(historyText[index])
      })

    //   美食部分的js设计
    $("#conten>.list>.food>div>.pice>.item").click(function(){
        let index = $(this).index()
        // 找到点击的图片，克隆一个备用
        let ClontImg = $(this).find("img").clone()

        ClontImg.css({width:$(this).width(),hight:$(this).height(),position:'absolute',left:$(this).position().left,top:$(this).position.top})
        ClontImg.animate({width:818,height:555,top:-100,left:140},1000)
        
        ClontImg.click(function(){
            $(this).animate({width:0,height:0},1000,function(){
                $(this).remove()
            })
        })
    })

})
